<template>
	<view v-show="!loading">
		<view class="top-box d-c-c">
			<image :src="info.curriculum_image" mode=""></image>
			<view class="box-r">
				<!-- <view class="box-r-1 f30 fweib">{{info.curriculum_title}}</view> -->
				<view class="box-r-2 f24 ellipsis-2-lines">{{info.curriculum_subtitle}}</view>
				<view class="box-r-3 d-b-c">
					<view class="text f26">{{info.study_total_num}}人在学习</view>
					<!-- <view class="btn f26">添加/移除</view> -->
				</view>
			</view>
		</view>
		
		<view class="box-c d-c-c">
			<view :class="['box-c-1', 'f26', {'active':currentTab==1}]" @click="currentTab=1">课程目录</view>
			<view :class="['box-c-1', 'f26', {'active':currentTab==2}]" @click="currentTab=2">课程简介</view>
		</view>
		
		<view class="box-content">
			<view class="box-content1" v-show="currentTab==2">
				<scroll-view :scroll-y="true" style="width:100%;height:100%;">
					<u-parse :html="info.curriculum_introduction"></u-parse>
				</scroll-view>
			</view>
			<view class="box-content2" v-show="currentTab == 1">
				<view class="box-course d-b-c">
					<view class="dropdown">
						<u-dropdown active-color="#4BB0FF">
							<u-dropdown-item 
								v-model="dropdownValue" 
								:title="dropdownTitle" 
								:options="dropdownList" 
								@change="dropdownChange"
							></u-dropdown-item>
						</u-dropdown>
					</view>
					<view class="text f24">共{{info.total_lesson_num}}课时</view>
					<view class="progress f24">已学习：<text>{{info.curriculum_progress}}%</text></view>
				</view>
				<view class="box-list">
					<scroll-view scroll-y class="list-scroll" :scroll-into-view="viewId" scroll-with-animation style="width:100%;">
						<view :id="`list-${item.chapter_id}`" class="list01" v-for="(item, index) in info.chapter_list" :key="index">
							<view class="title f30 fweib">{{item.chapter_name}}</view>
							<view class="list01-b">
								<view class="list01-b-1" v-for="(lesson, lIndex) in item.lesson_list" :key="lIndex">
									<view class="text1">{{lesson.lesson_name}}</view>
									
									<u-rate v-show="lesson.star>0" :count="5" v-model="lesson.star" active-color="#f2cb51" inactive-color="#f9e5a8"></u-rate>
									<view class="text2" v-if="lesson.star>0" @click="goStudy(lesson)">已学习</view>
									<view class="text2" v-else @click="goStudy(lesson)">去学习</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				curriculumId: 0,
				currentTab: 1,
				info: {},
				dropdownValue: 0,
				dropdownTitle: '课程章节',
				dropdownList: [],
				viewId: 'list-0',
			};
		},
		onLoad(options) {
			if (options.id) {
				this.curriculumId = options.id
				this.getCurriculum()
			} else {
				uni.navigateBack()
			}
		},
		methods: {
			getCurriculum(userId) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$u.post(this.$u.api.curriculumDetail, {
					curriculumId: this.curriculumId,
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.setNavigationBarTitle({
							title: res.data.curriculum_title
						})
						this.dropdownList = [
							{label: '全部章节', value: 0},
						]
						if (res.data.chapter_list.length > 0) {
							for (let i=0;i<res.data.chapter_list.length;i++) {
								let chapter = res.data.chapter_list[i]
								let temp = {
									label: chapter.chapter_name + '（共' + chapter.lesson_num + '讲）',
									value: chapter.chapter_id,
									name: chapter.chapter_name,
								}
								this.dropdownList.push(temp)
							}
						}
						this.info = res.data
						this.loading = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					uni.hideLoading()
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					})
				})
			},
			// 课程章节选择
			dropdownChange(e) {
				this.dropdownList.forEach((item) => {
					if (item.value == e) {
						console.log(item)
						this.dropdownTitle = item.name
					}
				})
				this.$nextTick(() => {
					this.viewId = 'list-' + e
				})
			},
			// 去学习
			goStudy(lesson) {
				if (!this.$store.state.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return false
				}
				if (!lesson.lesson_data) {
					uni.showToast({
						title: '学习数据不存在',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/curriculum/study?id='+lesson.lesson_id+'&url='+lesson.lesson_data
				})
			},
		},
	}
</script>

<style lang="less" scoped>
page{
	background: #EEFAFF;
}
::v-deep .u-dropdown__content__mask {
	background: transparent !important;
}
::v-deep .u-cell-item-box {
	background-color: #F8F8F8 !important;
}
.top-box{
	width: 100%;
	height: 200rpx;
	padding: 10rpx 50rpx;
	background-color: #fff;
	box-sizing: border-box;
	image{
		display: block;
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}
	.box-r{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		justify-content: space-around;
		.box-r-1{
			line-height: 40rpx;
		}
		.box-r-2{
			width: 100%;
			color: #999999;
			line-height: 36rpx;
		}
		.box-r-3{
			
			.text{
				color: #999999;
			}
			.btn{
				width: 170rpx;
				line-height: 60rpx;
				background: rgba(75,176,255,0.1);
				border-radius: 30rpx;
				color: #4BB0FF;
				text-align: center;
			}
		}
	}
}
.box-c{
	width: 100%;
	background-color: #fff;
	border-bottom: 1rpx solid  rgba(204,204,204,0.5);
	.box-c-1{
		height: 60rpx;
		margin: 0 64rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #FFFFFF;
	}
	.active{
		font-weight: bold;
		color: #4BB0FF;
		border-bottom-color: #4BB0FF;
	}
}

/deep/ .box-content{
	width: 100%;
	height: calc(100vh - 324rpx - var(--window-top));
	overflow: hidden;
	
	.box-content1{
		width: 100%;
		height: 100%;
		padding: 20rpx;
		overflow-y: scroll;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	
	.box-content2{
		width: 100%;
		height: 100%;
		position: relative;
		
		.box-course{
			width: 100%;
			height: 100rpx;
			padding: 20rpx 30rpx;
			background-color: #fff;
			box-sizing: border-box;
			// position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			.dropdown{
				width: 180rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background-color: rgba(153,153,153,0.2);
				.u-dropdown{
					height: 100%;
					.u-dropdown__menu{
						height: 100% !important;
					}
					
					.u-dropdown__content{
						min-width: 450rpx;
						height: calc(100vh - 424rpx - var(--window-top)) !important;
						overflow-y: scroll !important;
					}
				}
				
			}
			
			.progress{
				text{
					color: #4BB0FF;
				}
			}
		}
		
		.box-list{
			width: 100%;
			height: 100%;
			// padding-top: 100rpx;
			overflow-y: scroll;
			box-sizing: border-box;
			position: relative;
			z-index: 10;
			.list-scroll{
				height: calc(100vh - 500rpx);
			}
			.list01{
				
				.title{
					line-height: 80rpx;
					padding-left: 30rpx;
				}
				
				.list01-b{
					
					.list01-b-1{
						background-color: #fff;
						display: flex;
						align-items: center;
						padding: 25rpx 50rpx 25rpx 30rpx;
						border-bottom:1rpx solid rgba(204,204,204,0.5);
						&:hover{
							background-color: rgba(11,153,254,0.3) !important;
							cursor: pointer;
						}
						.text2{
							width: 116rpx;
							line-height: 46rpx;
							background: rgba(75,176,255,0.2);
							border-radius: 23rpx;
							font-size: 22rpx;
							color: #4BB0FF;
							margin-left: auto;
							text-align: center;
						}
					}
					
				}
				
			}
		}
	}
}


::v-deep .u-dropdown__content{
	.u-dropdown__content__popup {
		.u-dropdown-item__options{
			.u-cell-box{
				.u-cell:hover{
					background: rgba(75,176,255,.5) !important;
					cursor: pointer;
				}
			}
		}
		
	}
}


</style>
